<template>
    <div class="banner">
        <div class="list1">
            <ul>
                <li :class="{active:currentIndex == index}" v-for="(item,index) in list" :key="index" @click="$emit('deliverIndex',index)">
                                                                                                                    <!-- 双引号里只能套单引号 -->
                    {{item.listName}}
                </li>
            </ul>
        </div>
        <div class="list2">
            <h4>热销</h4>
            <ul>
                <li v-for="(item,index) in list[currentIndex].list" :key="index">
                    <img :src="item.pic" alt="">
                    <div class="font">
                        <p class="p1">{{item.name}}</p>
                        <p class="p2">{{item.wen}}</p>
                        <div class="foot">
                            <span>${{item.price}}</span>
                            <span class="jia">+</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
export default {
    props:["list","currentIndex"]
}
</script>

<style lang="scss" scoped>
   
    .banner{
        width: 100%;
        display: flex;
        height: 400px;
    }
    .banner .list1{
        flex: 1;
        height: 100%;
        // background-color: red;
    }
    .list1 li {
        text-align: center;
        height: 60px;
        line-height: 60px;
        border-left: 2px solid transparent;
        font-size: 14px;
        width: 80px;
        
    }
    .banner .list2{
        flex: 3;
        height: 100%;
        // background-color: yellow;
    }
    .banner .list2 li{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        
    }
    .banner .list2 li img{
        width: 97px;
        height: 97px;
    }
    .banner .list2 li .p1{
        font-size: 14px;
        font-weight: bold;
        margin-left: 5px;
    }
    .banner .list2 li .p2{
        font-size: 10px;
        color: gray;
        margin-left: 5px;
    }
    .font{
        width: 143px;
    }
    .foot{
        width: 100%;
        height: 15px;
        margin-top: 25px;
    }
    .jia{
        width: 20px;
        height: 20px;
        background-color: skyblue;
        border-radius: 50%;
        color: white;
        float: right;
        margin-right: 10px;
        text-align: center;

    }
    .banner .active{
        font-weight: bolder;
        border-left: 2px solid red;
    }
</style>